<template>
    <div class="userGroupManage">
        <div class="experience_inputs">
            <div class="creatBtn">
                <div class="add_item" @click='dialogFormVisible1=true'>+添加编辑行</div>
            </div>
        </div>
        <el-table
            v-loading="loading2"
            element-loading-text="加载中..."
            :data="experienceData"
            stripe 
            size="mini"
            border resizable
            style="width: 100%"
            :height="tableHeight">
            <el-table-column
                label="ID"
                prop="id"
                :align="align">
            </el-table-column>
            <el-table-column
                label="组名"
                prop="name"
                :align="align">
            </el-table-column>
            <el-table-column
                label="组名描述"
                prop="remark"
                :align="align">
            </el-table-column>   
            <el-table-column 
                fixed="right" 
                align="center"
                min-width="280"
                label="操作">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="userMenu(scope.row.id)">用户组-菜单显示</el-button>
                    <el-button
                        size="mini"
                        @click="editRow(scope.row.id,scope.row.name,scope.row.remark)">编辑</el-button>
                    <el-button
                        size="mini"
                        @click="delRow(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        
        <!-- 添加编辑行 -->
        <el-dialog title="添加编辑行" 
            width='beforeAddwidth'
            :modal=false
            :close-on-click-modal=false
            :visible.sync="dialogFormVisible1">
            <el-form>
                <el-form-item label="组名：" :label-width="formLabelWidth">
                    <el-input v-model="rolename" class="divided_2"></el-input>
                </el-form-item>
                <el-form-item label="组名描述：" :label-width="formLabelWidth">
                    <el-input v-model="remark" class="divided_2"></el-input>
                </el-form-item>   
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button class="dialog_close" @click="dialogFormVisible1=false">取 消</el-button>
                <el-button class="dialog_confirm" type="primary" @click="confirmAdd">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 编辑行 -->
        <el-dialog title="编辑行" 
            :modal=false
            width='beforeAddwidth'
            :close-on-click-modal=false
            :visible.sync="dialogFormVisible2">
            <el-form>
                <el-form-item label="ID：" :label-width="formLabelWidth">
                    <el-input v-model="roleId" disabled class="divided_2"></el-input>
                </el-form-item>
                <el-form-item label="组名：" :label-width="formLabelWidth">
                    <el-input v-model="rolename" class="divided_2"></el-input>
                </el-form-item>
                <el-form-item label="组名描述：" :label-width="formLabelWidth">
                    <el-input v-model="remark" class="divided_2"></el-input>
                </el-form-item>   
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button class="dialog_close" @click="dialogFormVisible2=false">取 消</el-button>
                <el-button class="dialog_confirm" type="primary" @click="confirmEdit">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 用户组-菜单显示 -->
        <el-dialog title="用户组-菜单显示" 
            width='beforeAddwidth'
            :modal=false
            :close-on-click-modal=false
            :visible.sync="dialogFormVisible3">
            
            <el-tree
                :data="selections"
                show-checkbox
                default-expand-all
                node-key="id"
                ref="tree"
                :check-strictly=true
                highlight-current
                :indent='40'
                :props="defaultProps">
            </el-tree>

            <div slot="footer" class="dialog-footer">
                <el-button class="dialog_close" @click="dialogFormVisible3=false">取 消</el-button>
                <el-button class="dialog_confirm" type="primary" @click="getCheckedKeys">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
import base from '../api/base.js'
export default {
    data() {
            return {
                tableHeight:window.innerHeight-300,
                loading2:true,
                formInline: {
                    classname: '',
                    range:'',
                    // dialogFormVisible:false
                },
                // 预约体验课表单
                reserveData:{
                    material:"",
                    classTime:'',
                    teacherArea:'',
                    sexNeed:'',
                    toolNeed:'',
                    chineseNeed:''
                },
                beforeAddwidth:'60%',
                dialogFormVisible1:false,//添加编辑行
                dialogFormVisible2:false,//编辑
                dialogFormVisible3:false,//用户组菜单显示
                columWidth:400,
                formLabelWidth: '160px',
                columWidth2:140,
                align:'center',
                form: {},
                // 角色列表
                experienceData: [],
                roleId:'',
                rolename:'',
                remark:'',
                selections:[],
                selections2:[],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                checkedNode:[]
            }
        },
        methods: {
            assignNode(){
                this.$axios({
                    url: base.baseUrl+"/school/setting/assign-node",
                    method: "POST",
                    header: { 'content-type': 'application/x-www-form-urlencoded' },
                    data:{
                        token:localStorage.token,
                        idlist:this.idlist,
                        roleid:this.roleId
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then(res => {
                    if(res.data.data==-1){
                        this.alertTip(res.data.msg)
                    }else if(res.data.code==200){
                        this.dialogFormVisible3=false
                        this.alertTip('修改成功')
                    }
                }); 
            },
            getCheckedKeys() {
                this.idlist=this.$refs.tree.getCheckedKeys()
                this.assignNode()
            },
            onSubmit() {
                // console.log(this.dialogFormVisible1)
            },
            getRoleList(){
                 this.$axios({
                    url: base.baseUrl+"/school/setting/get-role-list",
                    method: "POST",
                    header: { 'content-type': 'application/x-www-form-urlencoded' },
                    data:{
                        token:localStorage.token,
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then(res => {
                        if(res.data.code==-2){
                            this.$router.push('/login');
                        }else if(res.data.code==200){
                            this.experienceData=res.data.data
                            this.loading2=false
                        }
                });
            },
            // 添加编辑行
            confirmAdd(){
                this.$axios({
                    url: base.baseUrl+"/school/setting/add-role",
                    method: "POST",
                    header: { 'content-type': 'application/x-www-form-urlencoded' },
                    data:{
                        token:localStorage.token,
                        rolename:this.rolename,
                        remark:this.remark
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then(res => {
                    this.alertTip(res.data.msg)
                    if(res.data.code==200){
                        this.dialogFormVisible1=false
                        this.getRoleList()
                    }
                });
            },
            // 删除行
            delRow(id){
                this.roleId=id
                this.$confirm('确定删除', '提示', {
                    confirmButtonText: '确定',
                }).then(() => {
                    this.confirmDel()
                }).catch(()=>{
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });  
                })
            },
            editRow(id,name,remark){
                this.roleId=id
                this.rolename=name
                this.remark=remark
                this.dialogFormVisible2=true
            },
            confirmEdit(){
                this.$axios({
                    url: base.baseUrl+"/school/setting/edit-role",
                    method: "POST",
                    header: { 'content-type': 'application/x-www-form-urlencoded' },
                    data:{
                        token:localStorage.token,
                        roleid:this.roleId,
                        rolename:this.rolename,
                        remark:this.remark
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then(res => {
                    this.alertTip(res.data.msg)
                    if(res.data.code==200){
                        this.dialogFormVisible2=false
                        this.getRoleList()
                    }
                });
            },
            confirmDel(){
                this.$axios({
                    url: base.baseUrl+"/school/setting/remove-role",
                    method: "POST",
                    header: { 'content-type': 'application/x-www-form-urlencoded' },
                    data:{
                        token:localStorage.token,
                        roleid:this.roleId
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then(res => {
                    this.alertTip(res.data.msg)
                    if(res.data.code==200){
                        this.getRoleList()
                    }
                });
            },
            // 用户组菜单显示
            userMenu(rid){
                this.dialogFormVisible3=true
                this.roleId=rid
                this.getNodeList()
            },
            getNodeList(){
                this.$axios({
                    url: base.baseUrl+"/school/setting/get-node-list",
                    method: "POST",
                    header: { 'content-type': 'application/x-www-form-urlencoded' },
                    data:{
                        token:localStorage.token,
                        needall:1,
                        roleid:this.roleId
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then(res => {
                    if(res.data.code==200){
                        this.selections=this.selections2=res.data.data
                        this.selections=this.dofilter(this.selections)
                        this.setCheckedKeys()
                    }
                });
            },
            setCheckedKeys() {
                this.checkedNode=[]
                
                this.selections2.map((item,index)=>{
                    if(item.sublist){

                    }else if(item.avaliable==1){
                        this.checkedNode.push(item.id)
                    }
                })
                
                for(var index in this.selections2){
                    if(this.selections2[index].avaliable==1){
                        this.checkedNode.push(this.selections2[index].id)
                    }

                    if(this.selections2[index].sublist){
                        for(var index2 in this.selections2[index].sublist){
                            if(this.selections2[index].sublist[index2].avaliable==1){
                                this.checkedNode.push(this.selections2[index].sublist[index2].id)
                            }
                            if(this.selections2[index].sublist[index2].sublist){
                                for(var index3 in this.selections2[index].sublist[index2].sublist){
                                    if(this.selections2[index].sublist[index2].sublist[index3].avaliable==1){
                                        this.checkedNode.push(this.selections2[index].sublist[index2].sublist[index3].id)
                                    }
                                }
                            }
                        }
                    }
                }

                this.$refs.tree.setCheckedKeys(this.checkedNode);
                // console.log(this.checkedNode)
            },
            dofilter(testdata){
                var arr=[]
                testdata.map((item,index)=>{
                    if(item.sublist){
                        arr.push({
                            id:item.id,
                            label:item.title,
                            children:this.dofilter(item.sublist)
                        })
                    }else{
                        arr.push({
                            id:item.id,
                            label:item.title,
                        })
                    }
                })
                return arr;
            },
            alertTip(msg){
                this.$alert(msg, '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$message({
                            type: 'info',
                        });
                    }
                });
            }
        },
        created() {
            this.getRoleList()
            
        },
}
</script>
<style lang="less" scoped>

    .el-tree-node__content{
        height: 30px;
    }
    @media screen and (max-width:1700px){
        .el-form--inline{
            width: 1400px;
        }  
    }
    .add_item{
        width:200px;
    }
    .experience_inputs{
        height: 60px;
        box-sizing: border-box;
        background: #f5f5f5;
        padding-top: 10px;
        display: flex;
        .creatBtn{
            width: 240px;
            cursor: pointer;
        }
        .operate_inputs{
            // padding: 15px 30px;
            height: 70px;
            box-sizing: border-box;
            button{
                width: 130px;
                height: 38px;
                border-radius: 4px;
                border: none;
            }
            .search_btn{       
                background-color: #ff5263;
            }
            .reset_btn{
                background-color: #808080;
            }
        }
    }
</style>


